<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0081: Notebook V – Customized Tabs Part 3 | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0081: Notebook V – Customized Tabs Part 3" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="This GTK Tutorial covers customizing how tabs look." />
<meta property="og:description" content="This GTK Tutorial covers customizing how tabs look." />
<link rel="canonical" href="http://localhost:4000/posts/0081-notebook-v-custom-tabs-iii.html" />
<meta property="og:url" content="http://localhost:4000/posts/0081-notebook-v-custom-tabs-iii.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-10-22T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0081: Notebook V – Customized Tabs Part 3" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-10-22T00:00:00-04:00","datePublished":"2019-10-22T00:00:00-04:00","description":"This GTK Tutorial covers customizing how tabs look.","headline":"0081: Notebook V – Customized Tabs Part 3","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0081-notebook-v-custom-tabs-iii.html"},"url":"http://localhost:4000/posts/0081-notebook-v-custom-tabs-iii.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/container.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-10-22T00:00:00-04:00" itemprop="datePublished">Tuesday, October 22, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0081-notebook-v--customized-tabs-part-3">0081: Notebook V – Customized Tabs Part 3</h1>

<p>Okay, let’s have another look at what we’re aiming for:</p>

<!-- 0, 1 -->
<!-- first occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/014_container/container_16.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/014_container/container_16_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/014_container/container_16_notebook_multi_custom_tabs.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for first (1st) occurrence of application and terminal screen shots on a single page -->

<h2 id="a-second-look-at-the-tabdrawingarea-preamble">A Second Look at the TabDrawingArea Preamble</h2>

<p>This time around, we’ll concentrate on just the stuff we’re using to draw:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">cairo_text_extents_t</span> <span class="n">extents</span><span class="p">;</span>
<span class="n">GtkAllocation</span> <span class="n">size</span><span class="p">;</span> <span class="c1">// the area assigned to the DrawingArea by its parent</span>
<span class="kt">double</span><span class="p">[]</span> <span class="n">northWestArc</span><span class="p">,</span> <span class="n">northEastArc</span><span class="p">;</span>
<span class="kt">double</span> <span class="n">xRight</span><span class="p">,</span> <span class="n">xLeft</span><span class="p">,</span> <span class="n">textBaseline</span> <span class="p">=</span> <span class="mi">22</span><span class="p">,</span> <span class="n">yUpper</span><span class="p">;</span>
<span class="kt">double</span> <span class="n">width</span><span class="p">,</span> <span class="n">height</span><span class="p">;</span>
<span class="kt">double</span><span class="p">[]</span> <span class="n">tabOutlineRGBA</span> <span class="p">=</span> <span class="p">[</span><span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">];</span>
<span class="kt">double</span><span class="p">[]</span> <span class="n">tabFillRGBA</span> <span class="p">=</span> <span class="p">[</span><span class="mf">0.949</span><span class="p">,</span> <span class="mf">0.949</span><span class="p">,</span> <span class="mf">0.949</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">];</span>
<span class="kt">double</span> <span class="n">cornerRadius</span> <span class="p">=</span> <span class="mi">10</span><span class="p">,</span> <span class="n">radians</span><span class="p">;</span>
<span class="kt">double</span> <span class="n">lineWidth</span> <span class="p">=</span> <span class="mi">2</span><span class="p">;</span>
</code></pre></div></div>

<p>The first two variables we looked at last time, but I’m repeating them here because they factor into the drawing. They are:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">cairo_text_extents_t extents</code>: which gives us the amount of space (width and height) that our string will take up in the <code class="language-plaintext highlighter-rouge">DrawingArea</code>, and</li>
  <li><code class="language-plaintext highlighter-rouge">GtkAllocation size</code>: which will tell us the size of the entire <code class="language-plaintext highlighter-rouge">DrawingArea</code>.</li>
</ul>

<p>The <code class="language-plaintext highlighter-rouge">extents</code> we need so we can make the <code class="language-plaintext highlighter-rouge">DrawingArea</code> large enough to fit the drawing. We need the <code class="language-plaintext highlighter-rouge">size</code> so we can center the text within the tab.</p>

<p>Now, the rest of this is for the actual drawing of the shape we’ll use as the tab’s background. Here’s a diagram I used as a guide:</p>

<div class="inpage-frame">
	<figure class="left">
		<img src="../images/diagrams/014_container/container_15.png" alt="Figure 1: Diagram for a round-shouldered tab" style="width: 250px; height: 141px;" />
		<figcaption>
			Figure 1: Diagram for a round-shouldered tab
		</figcaption>
	</figure>
</div>

<p>About the diagram:</p>

<ul>
  <li>where the red and blue lines meet is the center point for <code class="language-plaintext highlighter-rouge">northWestArc</code>,</li>
  <li>where the violet and gray lines meet is the center point for <code class="language-plaintext highlighter-rouge">northEastArc</code>,</li>
</ul>

<p>Relating the preamble variables with the diagram:</p>

<ul>
  <li>the <code class="language-plaintext highlighter-rouge">northWestArc</code> and <code class="language-plaintext highlighter-rouge">northEastArc</code> arrays will store values, in radians, that denote compass points for starting and stopped the drawing of the arc,</li>
  <li><code class="language-plaintext highlighter-rouge">xRight</code> and <code class="language-plaintext highlighter-rouge">xLeft</code> are the center points of the two green circles (where the blue/red lines intersect on the left and the gray/violet lines meet on the right),</li>
  <li>skipping down a bit… <code class="language-plaintext highlighter-rouge">cornerRadius</code> is the measurement from the center of either of the circles to the outer edge, and</li>
  <li><code class="language-plaintext highlighter-rouge">lineWidth</code> is how thick the line will be.</li>
</ul>

<p>Now, let’s skip back up and go over the rest of these preamble variables:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">textBaseline</code>: this isn’t shown on the diagram, but it’s the y offset for where we’ll be drawing the text in relation to the top of the <code class="language-plaintext highlighter-rouge">DrawingArea</code>… the top being ‘0’ (<em>see Figure 2 below</em>),</li>
  <li><code class="language-plaintext highlighter-rouge">yUpper</code> is marked by the horizontal blue and violet lines on the diagram, and</li>
  <li><code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> will be the dimensions of our rendered text.</li>
</ul>

<div class="inpage-frame">
	<figure class="left">
		<img src="../images/diagrams/014_container/custom_tabs_baseline_various_positions.png" alt="Figure 2: How the Custom Tab's Baseline setting Affects Placement of the Text" style="width: 497px; height: 341px;" />
		<figcaption>
			Figure 2: How the Custom Tab's Baseline setting Affects Placement of the Text
		</figcaption>
	</figure>
</div>

<p>That’s it for the variables controlling the mechanics of the drawing, but we have two more arrays to look at (both are colors given as components of red, green, blue, and alpha):</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">tabOutlineRGBA</code>: this is the line color, and</li>
  <li><code class="language-plaintext highlighter-rouge">tabFillRGBA</code>: this is an optional fill color if we want the tab to be a color other than gray.</li>
</ul>

<p>Okay, moving right along…</p>

<h2 id="a-second-look-at-the-constructor">A Second Look at the Constructor</h2>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">this</span><span class="p">(</span><span class="nb">string</span> <span class="n">labelText</span><span class="p">,</span> <span class="kt">int</span> <span class="n">tabNumber</span><span class="p">,</span> <span class="n">Notebook</span> <span class="n">notebook</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">_tabNumber</span> <span class="p">=</span> <span class="n">tabNumber</span><span class="p">;</span>
	<span class="n">_notebook</span> <span class="p">=</span> <span class="n">notebook</span><span class="p">;</span>
	<span class="n">_labelText</span> <span class="p">=</span> <span class="n">labelText</span> <span class="p">~</span> <span class="s">" "</span> <span class="p">~</span> <span class="n">_tabNumber</span><span class="p">.</span><span class="n">to</span><span class="p">!</span><span class="nb">string</span><span class="p">();</span>
		
	<span class="n">radians</span> <span class="p">=</span> <span class="n">PI</span> <span class="p">/</span> <span class="mf">180.0</span><span class="p">;</span>

	<span class="c1">// map out the shape ofa tab with rounded corners</span>
	<span class="n">northWestArc</span> <span class="p">=</span> <span class="p">[</span><span class="mi">180</span> <span class="p">*</span> <span class="n">radians</span><span class="p">,</span> <span class="mi">270</span> <span class="p">*</span> <span class="n">radians</span><span class="p">];</span> <span class="c1">// upper-left</span>
	<span class="n">northEastArc</span> <span class="p">=</span> <span class="p">[-</span><span class="mi">90</span> <span class="p">*</span> <span class="n">radians</span><span class="p">,</span> <span class="mi">0</span> <span class="p">*</span> <span class="n">radians</span><span class="p">];</span> <span class="c1">// upper-right</span>
	<span class="n">cornerRadius</span> <span class="p">=</span> <span class="mi">10</span><span class="p">;</span>

	<span class="n">addOnDraw</span><span class="p">(&amp;</span><span class="n">onDraw</span><span class="p">);</span>
	<span class="n">addOnButtonPress</span><span class="p">(&amp;</span><span class="n">onButtonPress</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// this()</span>
</code></pre></div></div>

<p>Just ignore the first two lines (which were covered in <a href="./0080-notebook-iv-custom-tabs-ii.html">Part 2 of this series</a>).</p>

<p>We did look at the third line before, but let me refresh your memory… This converts <code class="language-plaintext highlighter-rouge">_tabNumber</code> to a string so it can be concatenated onto the end of <code class="language-plaintext highlighter-rouge">_labelText</code>. This gives us a finalized string each time a <code class="language-plaintext highlighter-rouge">TabDrawingArea</code> is instantiated with both text and a tab number.</p>

<p>From there we have:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">radians</code>: we could have grabbed this from the standard math library, but it’s just as simple to do it this way; it comes out to a little less than two one-hundredths which is very close to the true measurement of one radian… when compared to one degree of arc around a circle (6.28 radians = 360 degrees),</li>
  <li>then we set up the start/end point coordinates (<code class="language-plaintext highlighter-rouge">northWestArc</code> and <code class="language-plaintext highlighter-rouge">northEastArc</code>) for drawing the rounded shoulders (keep in mind, as we talked about in the <em>Cairo</em> series, drawing in <em>Cairo</em> always goes clockwise), and</li>
  <li><code class="language-plaintext highlighter-rouge">cornerRadius</code>: as stated above, this is the distance starting from where the blue and red lines intersect and going to the outer edge of the arc.</li>
</ul>

<p>The last two lines, where the signals are hooked up, we covered last time.</p>

<h3 id="finally-the-ondraw-callback">Finally, the onDraw() Callback</h3>

<p>The first two lines:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">bool</span> <span class="n">onDraw</span><span class="p">(</span><span class="n">Scoped</span><span class="p">!</span><span class="n">Context</span> <span class="n">context</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">w</span><span class="p">)</span>
<span class="p">{</span>
	<span class="c1">// set the font size to something resembling the default UI font</span>
	<span class="n">context</span><span class="p">.</span><span class="n">setFontSize</span><span class="p">(</span><span class="mi">13</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">selectFontFace</span><span class="p">(</span><span class="s">"Sans 10"</span><span class="p">,</span> <span class="n">CairoFontSlant</span><span class="p">.</span><span class="n">NORMAL</span><span class="p">,</span> <span class="n">CairoFontWeight</span><span class="p">.</span><span class="n">BOLD</span><span class="p">);</span>
</code></pre></div></div>

<p>These set up the font. I picked <em>Sans 10</em> because it either is the standard <em>Windows 10</em> UI font or looks enough like it for our purposes. And, yes, it’s got to be bold or it just doesn’t look heavy enough compared to other UI text.</p>

<p>In <em>Linux</em> and other <em>UNIX</em>-like OSs, the UI font will vary depending on your theme.</p>

<p>Next, we have:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">getAllocation</span><span class="p">(</span><span class="n">size</span><span class="p">);</span>
</code></pre></div></div>

<p>This gives us the size of the <code class="language-plaintext highlighter-rouge">DrawingArea</code> which we’ll use in a moment to figure out where to place the text.</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">context</span><span class="p">.</span><span class="n">textExtents</span><span class="p">(</span><span class="n">_labelText</span><span class="p">,</span> <span class="p">&amp;</span><span class="n">extents</span><span class="p">);</span>
<span class="n">width</span> <span class="p">=</span> <span class="n">extents</span><span class="p">.</span><span class="n">width</span> <span class="p">+</span> <span class="mi">20</span><span class="p">;</span>
<span class="n">height</span> <span class="p">=</span> <span class="n">extents</span><span class="p">.</span><span class="n">height</span> <span class="p">+</span> <span class="mi">10</span><span class="p">;</span>
</code></pre></div></div>

<p>A call to <code class="language-plaintext highlighter-rouge">textExtents()</code> gives us the area that will be taken up by the rendered text, in pixels. We tack on a bit more in each direction so the text won’t look cramped.</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">setSizeRequest</span><span class="p">(</span><span class="k">cast</span><span class="p">(</span><span class="kt">int</span><span class="p">)</span><span class="n">width</span><span class="p">,</span> <span class="k">cast</span><span class="p">(</span><span class="kt">int</span><span class="p">)</span><span class="n">height</span><span class="p">);</span>
<span class="n">xLeft</span> <span class="p">=</span> <span class="mi">12</span><span class="p">;</span>
<span class="n">xRight</span> <span class="p">=</span> <span class="n">width</span> <span class="p">-</span> <span class="mi">11</span><span class="p">;</span>
<span class="n">yUpper</span> <span class="p">=</span> <span class="mi">15</span><span class="p">;</span>
<span class="n">context</span><span class="p">.</span><span class="n">setLineWidth</span><span class="p">(</span><span class="n">lineWidth</span><span class="p">);</span>
</code></pre></div></div>

<p>Here, we:</p>

<ul>
  <li>resize the <code class="language-plaintext highlighter-rouge">DrawingArea</code> so we have enough room to do the job at hand,</li>
  <li><code class="language-plaintext highlighter-rouge">xLeft</code>: set the x coordinate of the point where we’ll start drawing. This is 12 pixels in from the left edge of the <code class="language-plaintext highlighter-rouge">DrawingArea</code>,</li>
  <li><code class="language-plaintext highlighter-rouge">xRight</code>: set the x coordinate where we finish the drawing on the right hand side (offset 11 pixels in from the right edge,</li>
  <li><code class="language-plaintext highlighter-rouge">yUpper</code>: set the y location of the center of the circle (as we talked about in the preamble section above), and</li>
  <li><code class="language-plaintext highlighter-rouge">setLineWidth()</code>: self explanitory.</li>
</ul>

<p><em>Note: You might think both <code class="language-plaintext highlighter-rouge">xLeft</code> and <code class="language-plaintext highlighter-rouge">xRight</code> should have the same value, but because of a</em> Cairo <em>anomaly related to line width, they don’t.</em></p>

<h3 id="final-setup-before-drawing-the-tab">Final Setup Before Drawing the Tab</h3>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">context</span><span class="p">.</span><span class="n">newSubPath</span><span class="p">();</span>
<span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">32</span><span class="p">);</span>
<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">12</span><span class="p">);</span>
<span class="n">context</span><span class="p">.</span><span class="n">arc</span><span class="p">(</span><span class="n">xLeft</span><span class="p">,</span>  <span class="n">yUpper</span><span class="p">,</span> <span class="n">cornerRadius</span><span class="p">,</span> <span class="n">northWestArc</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">northWestArc</span><span class="p">[</span><span class="mi">1</span><span class="p">]);</span> <span class="c1">// upper left corner</span>
<span class="n">context</span><span class="p">.</span><span class="n">arc</span><span class="p">(</span><span class="n">xRight</span><span class="p">,</span> <span class="n">yUpper</span><span class="p">,</span> <span class="n">cornerRadius</span><span class="p">,</span> <span class="n">northEastArc</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">northEastArc</span><span class="p">[</span><span class="mi">1</span><span class="p">]);</span> <span class="c1">// upper right corner</span>
<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="n">width</span> <span class="p">-</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">32</span><span class="p">);</span>
<span class="c1">// context.closePath(); // closing the path puts a line across the bottom which doesn't look very nice</span>
</code></pre></div></div>

<p>These statements prep the <em>Cairo</em> drawing routines, outlining the round-shouldered tab starting in the bottom left corner, moving up into the left shoulder, across to the right, then back down to the bottom.</p>

<p><em>Note: If you want a line across the bottom of the tab, uncomment the <code class="language-plaintext highlighter-rouge">closePath()</code> statement.</em></p>

<p><em>Note 2: Keep in mind that the above statements don’t actual do the drawing. It’s like handing someone a map with a route marked on it. The</em> map <em>will be used in the next step.</em></p>

<h3 id="drawing-the-tab">Drawing the Tab</h3>

<p>First we fill it:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">context</span><span class="p">.</span><span class="n">setSourceRgba</span><span class="p">(</span><span class="n">tabFillRGBA</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">tabFillRGBA</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">tabFillRGBA</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="n">tabFillRGBA</span><span class="p">[</span><span class="mi">3</span><span class="p">]);</span>
<span class="n">context</span><span class="p">.</span><span class="n">fillPreserve</span><span class="p">();</span>
</code></pre></div></div>

<p>Then we do the outline:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">context</span><span class="p">.</span><span class="n">setSourceRgba</span><span class="p">(</span><span class="n">tabOutlineRGBA</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">tabOutlineRGBA</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">tabOutlineRGBA</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="n">tabOutlineRGBA</span><span class="p">[</span><span class="mi">3</span><span class="p">]);</span>
<span class="n">context</span><span class="p">.</span><span class="n">stroke</span><span class="p">();</span>
</code></pre></div></div>

<p>And lastly, we overlay the text:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="n">size</span><span class="p">.</span><span class="n">width</span> <span class="p">/</span> <span class="mi">2</span> <span class="p">-</span> <span class="n">extents</span><span class="p">.</span><span class="n">width</span> <span class="p">/</span> <span class="mi">2</span><span class="p">,</span> <span class="n">textBaseline</span><span class="p">);</span> <span class="n">context</span><span class="p">.</span><span class="n">showText</span><span class="p">(</span><span class="n">_labelText</span><span class="p">);</span>
</code></pre></div></div>

<p>And that is that.</p>

<h2 id="conclusion">Conclusion</h2>

<p>Next time, we’ll start by looking at adding and removing tabs from a <code class="language-plaintext highlighter-rouge">Notebook</code>.</p>

<p>Until then, have fun.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0080-notebook-iv-custom-tabs-ii.html">Previous: Notebook IV - Custom Tabs II</a>
	</div>
	<div style="float: right;">
		<a href="./0082-notebook-vi-add-remove-tabs.html">Next: Notebook VI - Add &amp; Remove Tabs</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0081-notebook-v-custom-tabs-iii.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
